<template>
  <div class="spec-header">
    <div class="container xui-fc">
      <router-link :to="{name:'home'}" class="logo xui-fl" >
        <img src="@/assets/images/specExhib/style1/indexlogo.png" alt="">
      </router-link>
      <ul class="spec-menu xui-fr xui-fc" :class="{'english-menu':isEn}">
        <li @mouseover="hoverIndex = 1" @mouseout="hoverIndex = 0">
          <router-link :to="{name:'specExhibition-home'}" :style="defaultStyle1">
            <span class="span1">首页</span>
            <span class="span2" :class="{'vertical':!isEn}">Home</span>
          </router-link>
        </li>
        <li @mouseover="hoverIndex = 2" @mouseout="hoverIndex = 0">
          <router-link :to="{name:'specExhibition-introduce'}" :style="defaultStyle2">
            <span class="span1">展览介绍</span>
            <span class="span2" :class="{'vertical':!isEn}">Exhibition Overview</span>
          </router-link>
        </li>
        <li @mouseover="hoverIndex = 3" @mouseout="hoverIndex = 0">
          <router-link :to="{name:'specExhibition-exhibit'}" :style="defaultStyle3">
            <span class="span1">展品欣赏</span>
            <span class="span2" :class="{'vertical':!isEn}">Selected Exhibits</span>
          </router-link>
        </li>
        <li @mouseover="hoverIndex = 4" @mouseout="hoverIndex = 0">
          <router-link :to="{name:'specExhibition-scene'}" :style="defaultStyle4">
            <span class="span1">展厅内景</span>
            <span class="span2" :class="{'vertical':!isEn}">Interior Scenes</span>
          </router-link>
        </li>
        <li @mouseover="hoverIndex = 5" v-if="isShowOnline && exhibUrl" @mouseout="hoverIndex = 0" >
          <a :href="exhibUrl" target="_blank" :style="defaultStyle5">
            <span class="span1">网上展厅</span>
            <span class="span2" :class="{'vertical':!isEn}" >Online Exhibition</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getLang } from "@/utils/lang";
export default {
  props: {
    exhibUrl: {
      default: ""
    },
    defaultColor: {
      default: "#333333"
    },
    focusColor: {
      default: "#ffffff"
    },
    isShowOnline: {
      default: false
    }
  },
  data() {
    return {
      hoverIndex: 0
    };
  },
  computed: {
    isEn() {
      return getLang() == "en";
    },
    choseIndex() {
      let rname = this.$route.name.split("-")[1];
      switch (rname) {
        case "home":
          return 1;
          break;
        case "introduce":
          return 2;
          break;
        case "exhibit":
          return 3;
          break;
        case "scene":
          return 4;
      }
    },
    defaultStyle() {
      return {
        color: this.defaultColor,
        borderColor: this.defaultColor
      };
    },
    focusStyle() {
      return {
        color: this.focusColor,
        borderColor: this.focusColor
      };
    },
    defaultStyle1() {
      if (this.hoverIndex == 1 || this.choseIndex == 1) {
        return this.focusStyle;
      }
      return this.defaultStyle;
    },
    defaultStyle2() {
      if (this.hoverIndex == 2 || this.choseIndex == 2) {
        return this.focusStyle;
      }
      return this.defaultStyle;
    },
    defaultStyle3() {
      if (this.hoverIndex == 3 || this.choseIndex == 3) {
        return this.focusStyle;
      }
      return this.defaultStyle;
    },
    defaultStyle4() {
      if (this.hoverIndex == 4 || this.choseIndex == 4) {
        return this.focusStyle;
      }
      return this.defaultStyle;
    },
    defaultStyle5() {
      if (this.hoverIndex == 5 || this.choseIndex == 5) {
        return this.focusStyle;
      }
      return this.defaultStyle;
    }
  }
};
</script>


<style lang="less" scoped>
.spec-menu {
  li a {
    display: block;
    .vertical {
      margin: 0 auto;
      height: 140px;
      writing-mode: vertical-lr; /*从左向右 从右向左是 writing-mode: vertical-rl;*/
      writing-mode: tb-lr; /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
    }
  }
  &.english-menu {
    margin-right: 50px;
    li {
      margin-left: 20px;
    }
    .span1 {
      display: none !important;
    }
    .span2 {
      font-size: 15px !important;
      font-weight: bold;
      font-family: Arial, Helvetica, sans-serif !important;
    }
  }
}
</style>


